押忍(U 'ᴗ' U)⑅ SONYKO ダヨ♡♡♡

昨天講 箭頭函式之後、
接下來我們的陣列操作也可以使用它哩！

今天介紹項目：

• filter ()
• join ()
• slice ()
• map ()

map 昨天有提到一下、今天再來加深印象 ♩

⑅　filter ()

聽說他被譽為最好用陣列方法之一。
這列操作越來越方便、方便到都可以取代迴圈了。
filter 他會回傳一個新的陣列、不會變更到原本的陣列 。

就來看看這個人氣ㄉ陣列操作方法吧 (U 'ᴗ' U)⑅

範例：

/* 你的陣列 */
let monster = [
	{
		name: '冰咒龍',
		type: '冰'
	},{
		name: '雷狼龍',
		type: '雷'
	},{
		name: '冥燈龍',
		type: '龍'
	},{
		name: '滅盡龍',
		type: '龍'
	}
]

/* 使用 filter 得到的新陣列 */
let new_mon = monster.filter(i=>i.type=='龍')

console.log(new_mon)
/*
	[{name: '冥燈龍', type: '龍'},
	 {name: '滅盡龍', type: '龍'}]
*/

感覺跟 forEach 的用法滿像的 ✧
他們差在 filter 一樣會跑過每筆陣列、但他會產生出新的陣列 。
看我們上面範例的 new_mon 就是一筆新的陣列 ( ॑˘ ॑ ) ⁾⁾

⑅　join ()

這個 我實在想不出來可以用在哪裏
可能哪天就會剛好遇到會用到他的情形w

範例：

let num = [1,2,3,4,5,6]
let new_num = num.join('隻貓　')
console.log(new_num)
				// "1隻貓　2隻貓　3隻貓　4隻貓　5隻貓　6"

怎麼沒有 6隻貓 ？

join 會將你的陣列轉換成字串、
他後面的小括號代表 取代逗號的內容 ✧

上面範例可以看出原本的 逗號 通通變成 隻貓 ♩

再來看看其他範例：

/* () 什麼都不加的狀態 */
let num = [1,2,3,4,5,6]
let new_num = num.join();
console.log(new_num)
				// "1,2,3,4,5,6" 直接變字串、逗號還在

/* join('') 清空逗號 */
let new_num = num.join('');
console.log(new_num)
						// "123456"

/* join('+') */
let new_num = num.join('+');
console.log(new_num)
						// "1+2+3+4+5+6"

join 就這樣！
期待有一天能用到他 (U 'ᴗ' U)⑅

⑅　slice ()

這個無痛學習 (ง ˙˘˙ )ว ✺

他主要是用來切割陣列、並產生出一個新的陣列。
直接看code 秒懂：

let a = ['我', '的', '貓', '超', '肥', '的', '呵']
let b = a.slice(2,5)
console.log(b)
			// ["貓", "超", "肥"]

唯一要注意的點就是、
像範例我切 2 ～ 5 的話，是取到 (索引値) 4 喔 。

slice 就這樣而已 ✺

⑅　map ()

✧ ｡ﾟ 超人氣陣列操作法 map 颯爽登場 ｡ﾟ✧

昨天有稍微講一下 map 了、

map 會處理陣列每一筆資料、並回傳出一個新陣列。
他適合用在 陣列需要一並調整 的時候使用。

範例：

let num = [1,2,3,4,5]
let new_num = num.map (i => i*100)
console.log (new_num)
	// [100, 200, 300, 400, 500]

/* 非箭頭函式版 */
let new_num = num.map (function(i){
	return i * 100
})

我們用map 得到一個通通乘過100 的新陣列 ✺
如此一來就不需要使用 for 迴圈做類似處理了。

map 還有什麼用法嗎？
其實很多、但我只介紹我等級範圍內的部分 ( ˙꒳˙ ٥)

⑅　再來看個例子：

let items = [1,2,3,4,5,6,7,8,9]
 
let result = items.map((i, index )=>{
 
	// 我想要取 原陣列的 偶數索引 去乘 2
    if( index % 2 !== 0 ) {
        return i * 2 
    }
    else {
        return i 
    }
})

console.log(result)
			// [1, 4, 3, 8, 5, 12, 7, 16, 9]

這邊第二個參數是陣列編號、跟 forEach 一樣哩。
所以我們如果改 if 判斷條件為 index % 2 === 0 就能取到奇數索引了 ✺

⑅　最後介紹這個用法：

除了 callback 函式，我們還能透過第二參數 指定物件 ✧

黑人問號？ 直接看扣最快 la ：

// 先創一個物件

let monsterHP = {
	'炎王龍': 300000000,
	'土沙龍': 50000,
	'冥波龍': 45000000,
	'黑龍': 90000000000
}

陣列.map(function(i){

	// 我們可以用this 指到對應的値

}, monsterHP) // <--- 第二參數

callback 函式中的 this 會指向 第二參數 的物件。

接著來試試怎麼取得龍龍的 HP：

let monsterHP = {
	'炎王龍': 300000000,
	'土沙龍': 50000,
	'冥波龍': 45000000,
	'黑龍': 90000000000
}

// 指定 keyword
let monster = ['炎王龍','黑龍']

let result = monster.map(function(i){

	// 用陣列的 keyword 取得上面物件的値
	 return this[i]
},monsterHP)

console.log (result)
	// [300000000, 90000000000]

解說：

1. 我們有一個物件、想用map 去取得物件裡面的値。
2. 我創一個陣列、打我想取得的値　的key 。
3. 接著創一個 取得map 結果的新陣列。
   return 的地方用 this 去取得 物件相對應的値。
   記得後面要打第二參數（也就是物件名稱 ）

最後介紹的這個用法有點雜w
如果覺得看不懂在寫三小就直接跳過沒關係的 ( ˙꒳˙ ٥)

最近有點腦袋打結
文章如果打得亂七八糟不要罵我5555

感謝各位的閱讀 ✧
護眼記得多吃魚油 & 葉黃素 。

じゃあ、またね　(U 'ᴗ' U)⑅
　
　

୨୧(U 'ᴗ' U) SONYKO的　前端日文小教室 ♡

「徒兒、我已經沒有什麼東西可以教你了！」
　
音檔

今天來介紹一些、
日本人如何念 我們常看到的英文單字：

1. フィルター　filter　（ Fi Ru Ta- ）
2. マップ　map　（ Ma ppu ）
3. スライス　slice　（ Su Rai Su ）
4. アレイ　Array　（ A Rei ）
5. ラストインデックスオフ　lastIndexOf　（ RaSuTo In De kku su O fu ）
6. シフト　shift　（ Shi fu to ）
7. フィル　fill　（ Fi Ru ）
8. コピーウィズイン　copyWithin　（Kopi- Wi zu In ）
9. ファインド　find　（ Fa i n do ）
10. ストリング　string　（ Su to rin gu ）

這就是為什麼
我英文這麼爛的原因

之前在學 git 、
master 一直無法發音、腦子裡都是 媽斯塔 ((

希望哪天我也能成為英文溜溜ㄉ工程師 (U 'ᴗ' U)⑅